// 前卫主机列表
<template>
  <div class="big_box" id="userBig">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>

    <div class="container problemList">
      <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
        <div>
          <span>设备所在辖区</span>
          <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
        </div>
      </div>
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
            <el-form-item label="网络状态:">
              <el-select v-model="searchCriteria.wlztValue" clearable filterable placeholder="请选择">
                <el-option v-for="item in wlztOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label>
              <el-input v-model.trim="searchCriteria.deviceIp" placeholder="输入前卫主机名称或设备IP" clearable style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btnSizeStyle" type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            stripe
            :data="tableData"
            style="width: 100%"
            ref="multipleTable"
            :header-cell-style="headerCellStyle"
            :cell-class-name="addClass"
            border
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            :row-class-name="getRowClass"
            @sort-change="sortthiscolumn"
            @expand-change="expandChange"
            v-loading="tableLoad"
          >
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>

            <el-table-column type="expand" style="background-color: oldlace">
              <template slot-scope="scope">
                <echarts-load v-if="scope.row.expandLoad || scope.row.reload_Nh" :chartFlag="scope.row.expandLoad" :reload="scope.row.reload_Nh" @refreshF="refreshNh(scope.row.id)" />
                <!-- v-if="scope.row.expandList.length>0" -->
                <!-- v-loading="scope.row.expandLoad" -->
                <ul v-else class="expandClass" :style="{ minHeight: scope.row.ywzjbdsl * 48 + 'px' }">
                  <li v-for="(item, index) in scope.row.expandList" :key="index">
                    <div>{{ item.zcmc }}</div>
                    <div>
                      <span class="type1">{{ item.zclxmc }}</span>
                      挂载在：{{ item.tdmc }}
                    </div>
                    <div style="overflow: hidden; height: 100%">
                      <el-link
                        :disabled="item.ip !== '' && item.ip !== null ? false : true"
                        :type="item.ip !== '' && item.ip !== null ? 'primary' : 'info'"
                        :underline="false"
                        :href="'http://' + item.ip"
                        target="_blank"
                        >远程控制</el-link
                      >
                      <span class="operation"></span>
                      <el-button type="text" size="small" :disabled="item.ip !== '' && item.ip !== null ? false : true" @click="showPingOk(item)">ping</el-button>
                    </div>
                  </li>
                </ul>
                <!-- <div
                    :style="{minHeight:scope.row.ywzjbdsl*48+'px',padding:'20px 0 0 20px'}"
                    >{{scope.row.expandMessage}}</div>-->
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <!-- <el-table-column prop="id" label="ID" min-width="50">
                <template slot-scope="scope">
                  <div class="hoveTitle">{{scope.row.id}}</div>
                </template>
                </el-table-column>-->
            <el-table-column prop="zcmc" show-overflow-tooltip label="前卫主机名称" min-width="200" sortable="custom">
              <template slot-scope="scope">
                <svg class="iconfont img_shouji2" aria-hidden="true" v-if="scope.row.ywzjbdsl > 0">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                <span v-html="getzcmc(scope.row)" style="padding-left: 20px"></span>
              </template>
            </el-table-column>
            <el-table-column prop="sfmc,csmc,qxmc,xzjdmc,xxdz" label="安装地址" min-width="150" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-html="adress(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" min-width="120">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.ip }}</div>
              </template>
            </el-table-column>
            <el-table-column label="品牌" width="80">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.ppmc }}</div>
              </template>
            </el-table-column>
            <el-table-column label="型号" width="150">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.xh }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="sbxlh" label="设备序列码" min-width="120">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.sbxlh }}</div>
              </template>
            </el-table-column>
            <el-table-column label="LAN/IoT状态" width="100">
              <template slot-scope="scope">
                <div v-if="aloneLoading" class="loading1" style="padding: 10px 0">
                  <div class="myloading"></div>
                  <div class="myloading"></div>
                  <div class="myloading"></div>
                  <div class="myloading"></div>
                  <div class="myloading"></div>
                </div>
                <div v-else>
                  <!-- {{ scope.row.wlzt }}/
                      {{ scope.row.zxzt }} -->
                  <div v-if="Number(scope.row.zxzt) === 1 || Number(scope.row.zxzt) === 2">
                    <!-- 1LAN/IoT在线    2LAN/IoT不在线-->
                    <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
                      <svg class="iconfont wlzt" aria-hidden="true">
                        <use :xlink:href="`#${Number(scope.row.zxzt) === 1 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
                      </svg>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
                      <svg class="iconfont wlzt" aria-hidden="true">
                        <use :xlink:href="`#${Number(scope.row.zxzt) === 1 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
                      </svg>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <!-- 3LAN在线    4IoT在线 -->
                    <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
                      <svg class="iconfont wlzt" aria-hidden="true">
                        <use :xlink:href="`#${Number(scope.row.zxzt) === 3 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
                      </svg>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
                      <svg class="iconfont wlzt" aria-hidden="true">
                        <use :xlink:href="`#${Number(scope.row.zxzt) === 4 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
                      </svg>
                    </el-tooltip>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="xqbm" label="辖区编码" min-width="120">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.xqbm }}</div>
              </template>
            </el-table-column>
            <el-table-column label="ICCID" width="180">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.iccid }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="bxq" label="维保期限" min-width="100">
              <template slot-scope="scope">
                <div class="wbqx" v-show="scope.row.bxq > 0">{{ Number(scope.row.bxq) > 9 ? scope.row.bxq : `0${scope.row.bxq}` }}个月</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sbbm" label="设备编码" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div class="hoveTitle">{{ scope.row.sbbm }}</div>
                  </template>
                </el-table-column>-->
            <el-table-column prop="zczt" label="资产状态" min-width="100">
              <template slot-scope="scope">
                <span style="padding: 5px 7px; display: inline-block" :class="['hoveTitle', `type${scope.row.zczt}`]">
                  {{ Number(scope.row.zczt) === 1 ? '使用中' : Number(scope.row.zczt) === 2 ? '停用' : '报废审核中' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="azrq" label="安装时间" min-width="100" sortable="custom">
              <template slot-scope="scope">
                <div class="hoveTitle">{{ scope.row.azrq | dateFormat2 }}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150" align="right">
              <template slot-scope="scope">
                <el-button type="text" size="small" :disabled="!scope.row.zxzt || !scope.row.sbxlh || scope.row.zxzt === 2 || quanxianBtns.btn1 ? true : false" @click="toConfigure(scope.row)"
                  >配置</el-button
                >
                <!-- <el-button type="text" size="small" @click="toConfigure(scope.row)">配置</el-button> -->
                <el-tooltip class="item" effect="dark" placement="top-start" v-if="!scope.row.zxzt || !scope.row.sbxlh || scope.row.zxzt === 2">
                  <div slot="content" v-if="scope.row.zxzt === 2 || !scope.row.zxzt">无网络</div>
                  <div slot="content" v-else>{{ getTips(scope.row.ip, scope.row.xqbm, scope.row.sbxlh, scope.row.dlmm) }}</div>
                  <span style="padding-left: 3px">
                    <svg class="iconfont" aria-hidden="true">
                      <use xlink:href="#el-icon-myquestion-mark" />
                    </svg>
                  </span>
                </el-tooltip>
                <span class="operation"></span>
                <el-button
                  type="text"
                  size="small"
                  :disabled="(scope.row.ip !== '' && scope.row.ip !== null ? false : true) || Number(scope.row.zxzt) === 2 || Number(scope.row.zxzt) === 4"
                  @click="showPingOk(scope.row)"
                  >ping</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="fooer_box">
            <div class="bigBOx">
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                <span>已绑定设备</span>
              </div>
            </div>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
              :hide-on-single-page="value"
              align="right"
            ></el-pagination>
          </div>
        </div>
      </div>
      <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    </div>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl'
import { getUrl } from '@/utils/getUrl.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { initList } from '@/assets/js/mainboard'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
// import FaultManageVue from '../Business/FaultManage.vue'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  components: { Ping, treesBox, echartsLoad },
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  data() {
    return {
      activeIndex: '1',
      treesBox: {
        url: 'ZI_CHAN',
        GZKZ: [53],
      }, // tree图的请求地址
      tableData: [], // 列表
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示行数
      total: 0, // 总条数
      value: false,
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      dialogFormVisible: false, // 添加设备弹出窗
      expands: [],
      getRowKeys(row) {
        // 行数据的Key
        return row.id
      },
      sf: '',
      cs: '',
      qx: '',
      xzjd: '',
      dialogTitle: '',
      listQuery: {
        // 排序
        sortby: '',
        order: '',
      },
      // loading: false, // 遮罩层
      creatTimer: null,
      // addItemData: {}, // 传入添加设备界面参数
      form: {}, // 搜索条件
      options: [], // 通道辖区列表
      tdOptions: [],
      value1: '', // 辖区选中值
      addShebei: {
        // 设备类型
        sblx: '',
        ss: '',
      },
      shebeilxOptions: [], // 设备类型列表
      searchCriteria: {
        // 输入设备名称或设备IP
        deviceIp: '',
        wlztValue: '', // 网络状态
      },
      expandFlag: false,
      expandTimer: null,
      expandLoad: false,
      tableMessage: '',
      tableLoad: false,
      zjID: '',
      aloneLoading: false,
      quanxianBtns: {
        btn1: true,
      },
      wlztOptions: [
        {
          value: 1,
          label: 'LAN/IoT在线',
        },
        {
          value: 2,
          label: 'LAN/IoT不在线',
        },
        {
          value: 3,
          label: 'LAN在线',
        },
        {
          value: 4,
          label: 'IoT在线',
        },
        {
          value: 5,
          label: 'LAN不在线',
        },
        {
          value: 6,
          label: 'IoT不在线',
        },
      ],
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },

    aloneLoading(newVal, oldVal) {
      this.aloneTimeout = setTimeout(() => {
        if (this.aloneLoading) {
          this.aloneLoading = false
        }
      }, timeLoad)
    },
  },
  created() {
    this.jurisdictionBtn()
    if (this.$route.params.sn) {
      this.searchCriteria.deviceIp = this.$route.params.sn
    }
    if (this.$route.params.wlztValue || this.$route.params.deviceIp) {
      const { wlztValue, deviceIp } = this.$route.params
      var wlzt = ''
      if (wlztValue !== '') {
        wlzt = Number(wlztValue)
      }
      this.searchCriteria.wlztValue = wlzt
      this.searchCriteria.deviceIp = deviceIp
    }
    // if (JSON.stringify(this.$route.params) !== '{}') {
    //   const { wlztValue, deviceIp } = this.$route.params
    //   var wlzt = ''
    //   if (wlztValue !== '') {
    //     wlzt = Number(wlztValue)
    //   }
    //   this.searchCriteria.wlztValue = wlzt
    //   this.searchCriteria.deviceIp = deviceIp
    // }
    initList(this) // 初始化前卫主机管理列表
  },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_QWZJ_QWZJLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'ZCZX_QWZJ_WLPZ') {
              this.quanxianBtns.btn1 = false // 配置
            }
          })
        }
      })
    },
    getzcmc(row) {
      return `<span>${row.zcmc}</span>`
    },
    adress(row) {
      return row.sfmc + row.csmc + row.qxmc + row.xzjdmc + row.xxdz
    },
    async getExpand(id) {
      // clearTimeout(this.expandTimer)
      const params = new URLSearchParams()
      params.append('YWZJBD_ID', id)
      params.append('userId', JSON.parse(getUrl('userconter')).id)
      const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
      switch (res.code) {
        case '0000':
          console.log(this.tableData)
          this.tableData.forEach((item, index) => {
            if (item.id === id) {
              item.expandList = res.data.list
              item.expandLoad = false
              item.reload_Nh = false
              item.expandMessage = ''
            }
          })
          break
        default:
          this.tableData.forEach((item, index) => {
            if (item.id === id) {
              item.expandList = []
              item.expandLoad = false
              item.reload_Nh = true
              item.expandMessage = res.message
            }
          })
          break
      }
    },
    refreshNh(id) {
      this.getExpand(id)
    },
    // 列表调用请求函数
    async getList(params) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      // flag 1 初始化前卫主机列表  2 添加设备列表
      const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            // 设置展开行数组
            item.expandList = []
            item.expandLoad = false
            item.reload_Nh = false
            // item.expandTimer = null
          })
          var sns = []
          res.data.list.forEach((item, index) => {
            sns.push(item.sbxlh)
            item.wlzt = ''
          })
          // 获取网络状态
          // this.getWlzt(sns)
          // res.data.list.forEach((item) => {
          //   this.$refs.multipleTable.toggleRowExpansion(item, false)
          // })
          this.tableData = res.data.list
          this.total = res.data.countList
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取列表网络状态
    async getWlzt(sns) {
      clearTimeout(this.aloneTimeout)
      this.aloneLoading = true
      const string = sns.join(',')
      // const { data: res } = await this.$http.get(`${zhuJiUrl}hygahost/selectHostNETStatusBySN?snStr=${string}`)
      const { data: res } = await this.$http.get(`api/host/selectHostNETStatusBySN?sn=${string}`) // 20210331更新
      console.log(res.data)
      if (res.code !== '0000') {
        return
      }
      this.tableData.forEach((item, index) => {
        for (const k in res.data) {
          if (item.sbxlh === k) {
            item.wlzt = res.data[k]
          }
        }
      })
      this.aloneLoading = false
    },
    // 前卫主机管理列表-设备所在辖区函数
    treeClick(treeData) {
      // 设备辖区
      this.sf = ''
      this.cs = ''
      this.qx = ''
      this.xzjd = ''
      switch (treeData.type.levels) {
        case 1:
          this.sf = treeData.type.label
          break
        case 2:
          this.cs = treeData.type.label
          break
        case 3:
          this.qx = treeData.type.label
          break
        case 4:
          this.xzjd = treeData.type.label
          break
        default:
      }
      this.currentPage = 1
      this.pageSize = 10
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowExpansion(item, false)
      })
      initList(this) // 加载列表
    },
    // 前卫主机管理列表-查询按钮
    onSubmit() {
      // 列表查询按钮
      this.currentPage = 1
      this.pageSize = 10
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowExpansion(item, false)
      })
      initList(this)
    },
    // 前卫主机管理列表-pageSize 改变时会触发
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowExpansion(item, false)
      })
      initList(this)
    },
    // 前卫主机管理列表-currentPage 改变时会触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowExpansion(item, false)
      })
      initList(this)
    },
    // 前卫主机管理列表-表格展开按钮函数
    expandChange(row, expanded) {
      clearTimeout(row.expandTimer)
      if (expanded.length < 1) {
        return
      }
      row.expandLoad = true
      this.zjID = row.id
      // this.getList(params, 2, row.id)
      this.getExpand(row.id)
    },
    // 前卫主机管理列表-排序
    sortthiscolumn(column) {
      // 排序
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowExpansion(item, false)
      })
      initList(this)
    },
    // 前卫主机管理列表-ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.ip
      this.ping.name = val.zcmc
    },
    // 前卫主机管理列表-ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // 前卫主机管理列表-配置按钮
    toConfigure(row) {
      //   跳转界面 //MainBoardEdit
      // 存储地址
      const addItemObj = {
        sf: row.sf,
        cs: row.cs,
        qx: row.qx,
        xzjd: row.xzjd,
      }
      localStorage.setItem('addItemObj', JSON.stringify(addItemObj))
      localStorage.setItem('ID', row.id)
      localStorage.setItem('SN', row.sbxlh)
      // localStorage.setItem('password', row.dlmm)
      localStorage.setItem('IP', row.ip)
      localStorage.setItem('XQBM', row.xqbm)
      localStorage.setItem('zcmc', row.zcmc)
      this.$router.push({
        name: 'mainboaredit',
        query: {
          wlztValue: this.searchCriteria.wlztValue,
          deviceIp: this.searchCriteria.deviceIp,
        },
      })
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass({ row, rowIndex }) {
      if (row.ywzjbdsl < 1) {
        // 小于1 加上row-expand-cover 隐藏展开箭头
        return 'row-expand-cover'
      }
    },
    // 前卫主机管理列表-表格头部样式
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        backgroundColor: '#ECF3FC',
        color: '#333333',
      }
    },
    // 前卫主机管理列表-表格颜色
    addClass({ row, column, rowIndex, columnIndex }) {
      // 控制列颜色改变
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 1 || columnIndex === 10) {
      //   return 'fontColor'
      // }
    },
    getTips(ip, xqbm, sn, dlmm) {
      let snTip = ''
      const arr = []
      let html = ''
      if (!sn) {
        snTip = '请输入设备序列码'
        arr.push(snTip)
      }
      arr.forEach((item) => {
        html += item + '/'
      })
      return `${html.substr(0, html.length - 1)}`
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/mainBoard.scss';
.problemList .problem-R .el-form {
  padding-top: 0;
}
.img_shouji2 {
  width: 16px;
  height: 16px;
}
.imgIcon {
  vertical-align: middle;
  width: 18px !important;
  height: 18px !important;
}
::v-deep .el-table__expanded-cell {
  padding-right: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
</style>
